<template>
	<view class="start2">
		<view class="con">
			<view class="tip_text">
				<view class="txt1">报名组局需要会员</view>
				<view class="txt2">请输入头像和昵称！</view>
			</view>

			<button class="user_hd" v-if="!HeadImgUrl" hover-class="none" open-type="chooseAvatar"
				@chooseavatar="onChooseAvatar">
				<image class="icon"
					src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710383282124459.pngC"
					mode="" />
			</button>
			<button class="user_hd" v-else hover-class="none" open-type="chooseAvatar"
				@chooseavatar="onChooseAvatar">
				<image class="hd_img" :src="HeadImgUrl" mode="aspectFill" />
			</button>
			<!-- <view class="des">如发现非本人真实照片，平台将禁用</view> -->
			<view class="input_box">
				<input type="nickname" v-model="Name" placeholder="您的昵称">
			</view>
			<view class="btn_box">
				<button class="btn btn1" @click="sub">确认注册并报名</button>
				<!-- <view class="btn btn2">
                身份保密
            </view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HeadImgUrl: '',
				Name: '',
				ball_id:''
			};
		},
		async onLoad(e) {
			this.ball_id=e.ball_id;
			
			let res = await this.$api.post('/Common/Add_ViewPath', {
				Path: 'ball_user_register',
				Platform:uni.getStorageSync('platform')
			});

			
		},
		methods: {
			async sub() {

				if (!this.HeadImgUrl) {
					this.$pv.msg('请上传头像');
					return;
				}

				if (!this.Name) {
					this.$pv.msg('请输入昵称');
					return;
				}

				let d = {
					HeadImgUrl: this.HeadImgUrl,
					Name: this.Name
				}
				let res = await this.$api.post('User/SingleRegister', d);
				
				//再报名球局			

				this.nav_to(`/pages/ball/ball_join_confirm?id=${this.ball_id}`);
			},
			async onChooseAvatar(e) {
				
				let avatarUrl = e.detail.avatarUrl;
				
				let r = await this.uploading(avatarUrl);
				
				
				this.HeadImgUrl = r;

			},
			
			async uploading(url, tempKey) {
				let _this = this;
				let r = await this.$api.upload(
					'/Community/Upload', {
						path: url
					},
					pro => {
						if (pro != 100) {
							_this.$pv.load('已上传' + pro + '%');
						} else {
							setTimeout(() => {
								_this.$pv.closeLoad();
							}, 300);
						}
					}
				);
				return r
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.con {
		width: 600rpx;
	}

	.des {
		margin-top: 20rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.start2 {
		height: 100vh;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pre_step {
		width: 100%;
		text-align: center;
		line-height: 120rpx;
		color: #767676;
	}

	.tip_text {
		position: relative;
		height: 160rpx;

		.txt1 {
			height: 80rpx;
			font-size: 64rpx;
			color: #0a0a0a;
		}

		.txt2 {
			position: absolute;
			width: 700rpx;
			height: 80rpx;
			font-size: 48rpx;
			color: #0a0a0a;
		}
	}

	.user_hd {
		margin-top: 88rpx;
		margin-left: auto;
		margin-right: auto;
		width: 260rpx;
		height: 260rpx;
		background: #f6f6f6;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			height: 80rpx;
			width: 80rpx;
		}

		.hd_img {
			height: 100%;
			width: 100%;
			border-radius: 50%;
		}
	}

	.input_box {
		margin-top: 52rpx;
		border-bottom: 1px solid #e6e6e6;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;

		input {
			height: 80rpx;
			line-height: 80rpx;
			color: #000;
		}

		.input-placeholder,
		.textarea-placeholder {
			color: #999;
		}
	}

	.btn1 {
		margin-top: 54rpx;
		width: 590rpx;
		height: 100rpx;
		background: linear-gradient(225deg, #020202 0%, #363636 100%);
		box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
		border-radius: 12rpx;
		opacity: 0.9;
		color: #fff;
		font-size: 36rpx;
		line-height: 100rpx;
	}

	.btn2 {
		line-height: 100rpx;
		margin-top: 32rpx;
		width: 590rpx;
		height: 100rpx;
		box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
		border-radius: 12rpx;
		border: 1px solid #0a0a0a;
		background: #fff;
		box-sizing: border-box;
	}

	.sex_box {
		margin-top: 120rpx;
		display: flex;
		justify-content: space-between;

		.imgbox {
			height: 200rpx;
			width: 200rpx;

			image {
				height: 200rpx;
				width: 200rpx;
			}
		}

		.sex_1,
		.sex_2 {
			.lab {
				margin-top: 22rpx;
				width: 200rpx;
				text-align: center;
				color: #0a0a0a;
				font-size: 32rpx;
			}
		}

		.sex_curr {
			.imgbox {
				position: relative;

				&::before {
					position: absolute;
					top: -13rpx;
					left: -13rpx;
					display: block;
					content: '';
					width: 228rpx;
					height: 228rpx;
					border: 5rpx solid rgba(0, 0, 0, 0.6);
					box-sizing: border-box;
					border-radius: 50%;
				}
			}
		}
	}
</style>